<script lang="ts" setup>
import {useMenu} from '@/utils/menuUtils';

const {items, current, doMenuClick} = useMenu();


</script>

<template>
  <div id="home">
    <div class="header_menu">
      <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="doMenuClick"
              class="menu"/>
    </div>

    <!-- todo:这里添加主页body -->

  </div>

</template>


<style scoped>
#home {
  background-color: #fcfcfc;

  .header_menu {
    display: flex;
    justify-content: center;
  }

  .menu {
    height: 50px;
    width: 100%;
    background: #4170ea;
    color: white;
    font-size: 17px;
  }

  :deep(.ant-menu) {
    padding-left: 36px;
  }

  :deep(.ant-menu-item:hover::after) {
    border-bottom-width: 2px;
    border-bottom-color: white;
  }

  :deep(.ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected)) {
    color: white;
    font-weight: normal;
  }

  :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-menu-light.ant-menu-horizontal >.ant-menu-item::after) {
    transform: translateY(-8px);
  }

  :deep(.ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected) {
    color: white;
  }
}
</style>

